<template>
  <div class="member-card">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员卡</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="会员卡"
          name="first">
          <CardList v-if="activeName==='first'" :toggleFn="()=>{activeName = 'second'}"/>
          </el-tab-pane>
        <el-tab-pane label="基础设置"
          name="second">
          <Base v-if="activeName==='second'" :toggleFn="()=>{activeName = 'third'}"/>
          </el-tab-pane>
        <el-tab-pane label="会员等级"
          name="third" >
          <Level :toggleFn="()=>{activeName = 'fourth'}"/>
          </el-tab-pane>
        <el-tab-pane label="会员权益"
          name="fourth">
          <Equity :toggleFn="()=>{activeName = 'first'}" v-if="activeName==='fourth'"/>
          </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import CardList from './cardList'
import Base from './base'
import Level from './level'
import Equity from './equity'
export default {
  components: {
    CardList,
    Base,
    Level,
    Equity
  },
  props: {},
  data() {
    return {
      activeName: "first",
      
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.member-card {
}
</style>